<!-- 
  我的歌单列表页面
 -->
<template>
  <div class="left">
    <div class="itemList animate__animated animate__fadeInLeft">
      <ul class="ul">
        <!-- <li @click="newSongList">新歌榜单</li>
        <li @click="musicList">音乐歌单</li> -->

        <!-- <li>|| 我的歌单</li>
        <li v-for="item in userPlayList" :key="item">{{ item.name }}</li> -->
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <span>我的歌单</span>
          </template>
          <el-menu-item-group title="我的歌单列表">
            <el-menu-item
              v-for="item in myPlayList"
              :key="item.id"
              :index="item.id.toString()">
              <span @click="toDetail(item)">{{ item.name }}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <span>我收藏的歌单</span>
          </template>
          <el-menu-item-group title="我收藏的歌单">
            <el-menu-item
              v-for="item in notMyPlayList"
              :key="item.id"
              :index="item.id.toString()">
              <span @click="toDetail(item)">{{ item.name }}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-menu-item index="3">
          <span>----</span>
        </el-menu-item>
        <el-menu-item index="4">
          <span>----</span>
        </el-menu-item>
        <el-menu-item index="5">
          <span>----</span>
        </el-menu-item>
      </el-menu>
      </ul>
    </div>
  </div>
</template>

<script>
// import { getNewSongs, getMusicList } from '../../netWork/index.js'
// import { getPlayListDetail, getPlayListTrackAll } from '../../netWork/easeRequest/easePlaylistserver.js'

export default {
  name: 'Middleleft',

  props: {
    userPlayList: {
      type: Object
    },
    myPlayList: {
      type: Object
    },
    notMyPlayList: {
      type: Object
    }
  },

  data() {
    return {
      
    };
  },

  mounted() {
    console.log('我的歌单', this.$props.myPlayList)
  },

  methods: {
    handleOpen() {
      console.log('谁知道这是什么东西')
    },
    handleClose() {

    },
    // 新歌榜单
    newSongList() {
      getNewSongs()
      .then(res => {
        console.log('新歌榜单==>>', res)
      })
    },
    // 音乐歌单
    musicList() {
      getMusicList()
      .then(res => {
        console.log('音乐歌单==>>', res)
      })
    },
    // 点击歌单
    toDetail(data) {
      console.log('歌单id==>>', data.id)
      this.$emit('getPlayListAll', data)
      // getPlayListTrackAll(data.id)
      // .then(res => {
      //   console.log('获取到的歌单详情', res)
      //   this.$emit('changeShowComponents')
      // })
      // this.$router.push({
      //   path: '/home/PlayListDetail'
      // })
    },
  },
};
</script>

<style lang="less" scoped>

.left {

  .itemList {

    .el-menu-vertical-demo {
      width: 100%;
    }

    .ul{
      list-style: none;
      margin: 0;
      padding: 0;

      li{
        border-radius: 10px;
      }

      // li:nth-of-type(1) {
      //   height: 30px;
      //   position: sticky;
      //   top: 0;
      //   opacity: .9;
      //   background: white;
      // }
      // li {
      //   width: 100%;
      //   line-height: 35px;
      //   height: 35px;
      //   padding: 7px;
      //   border-bottom: 1px solid rgb(233, 233, 233);
      //   cursor: pointer;
      // }
    }
  }
}

</style>